<template>
	<view>
		<u-upload :maxSize="maxSize" :limitType="limitType" :action="action" :maxCount="maxCount"  :show-progress="false" :file-list="file" @on-success="afterRead" @on-remove="del"></u-upload>
	</view>
</template>

<script>
	import {
		uploadFile
	} from "@/require/api.js";
	
	export default {
		props: {
			value: {
				type: String,
				default: ''
			},
			maxCount:{
				type:[String,Number],
				default:52
			},
			maxSize:{
				type:[String,Number],
				default:Number.MAX_VALUE
			},
			limitType :{
				type:[Array],
				default:()=>['png','jpg','jpeg','webp','gif']
			}
		},
		data() {
			return {
				file: [],
				list:[],
				action:''
			}
		},
		created() {
		  this.action=getApp().globalData.rootUrl+'/common/upload';
		},
		methods: {
			beforeUpload(){
				return true;
			},
			toValue() {
				let data = [];
				this.list.forEach(res => {
					data.push(res);
				})
				this.$emit("input", data.toString(','));
			},
			del(event) {
				this.list.splice(event.index, 1);
				this.toValue();
			},
			async afterRead(event) {
				
				this.list.push(event.data.url);
				await this.toValue();
				return true;
			}
		},
		watch: {
			value(val) {
				console.log(val);
				if (val == null) return;
				if (this.list.length > 0 && val != "") return;
				let vals = val.split(",");
				vals.forEach((res) => {
					
					if (res != "") {
						this.file.push({
							url:this.$imgUrl+ res
						});
					}
					
				});
			}
		}
	}
</script>

<style>
</style>
